<template>
  <div>
    <div class="top">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        show-action
        background="#21b97a"
        arrow-left
      >
        <template #label>杭州 ▼ |</template>
        <template #action><van-icon name="location-o" /></template>
      </van-search>
      <div class="middle">
        <van-cell is-link @click="showPopup">区域 ▼</van-cell>
        <van-popup v-model="show" position="top" :style="{ height: '30%' }">
          <van-picker show-toolbar :columns="columns" @change="onChange" />
        </van-popup>
      </div>
      <div class="list">
        <ul>
          <li v-for="item in house" :key="item.id">
            <img v-lazy="item" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { house } from '@/api/zhaofang'
const cities = {
  浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
  福建: ['福州', '厦门', '莆田', '三明', '泉州']
}
export default {
  async created() {
    const { data } = await house()
    this.lis = data.body
    this.lis.forEach((item) => {
      this.url = 'http://liufusong.top:8080' + item.imgSrc
      this.house.push(this.url)
    })
  },
  name: 'zhaofang-page',
  data() {
    return {
      value: '',
      lis: [],
      url: '',
      house: [],
      show: false,
      columns: [{ values: Object.keys(cities) }, { values: cities['浙江'] }]
    }
  },
  methods: {
    showPopup() {
      this.show = true
    },
    onChange(picker, values) {
      picker.setColumnValues(1, cities[values[0]])
    }
  }
}
</script>

<style scoped lang="less">
.top {
  width: 375px;
  height: 100px;
  background-color: aqua;
}
</style>
